<template>
  <div class="app-container">
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="网卡" min-width="90">
        <template slot-scope="{row}">
          {{ row.name?row.name:"/" }}
        </template>
      </el-table-column>
      <el-table-column label="取址类型" min-width="90px">
        <template slot-scope="{row}">
          {{ row.type?row.type:"/" }}
        </template>
      </el-table-column>
      <el-table-column label="IP地址" min-width="90px">
        <template slot-scope="{row}">
          {{ row.ip?row.ip:"/" }}
        </template>
      </el-table-column>
      <el-table-column label="子网掩码" align="center" min-width="90px">
        <template slot-scope="{row}">
          {{ row.netmask?row.netmask:"/" }}
        </template>
      </el-table-column>
      <el-table-column label="网关地址" align="center" min-width="90px">
        <template slot-scope="{row}">
          {{ row.gateway?row.gateway:"/" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-bnet-card-drawer ref="editBnetCardDrawer" @save="save"></edit-bnet-card-drawer>
  </div>
</template>

<script>
  import { getAllBnetCard } from "@/api/bnetCard";
  import EditBnetCardDrawer from "./components/EditBnetCardDrawer";

  export default {
    components: {
      'edit-bnet-card-drawer': EditBnetCardDrawer
    },
    data() {
      return {
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        itemsChecked: [],
        tableData: []
      };
    },
    computed: {},
    watch: {},
    created() {
      this.getAllBnetCard();
    },
    methods: {
      handleSearch() {
        this.getAllBnetCard();
      },
      getAllBnetCard() {
        this.tableLoading = true;
        getAllBnetCard().then(result => {
          this.tableData = result;
          this.tableLoading = false;
        });
      },
      selectionChange(selection) {
        this.itemsChecked = selection;
      },
      save() {
        this.getAllBnetCard();
        this.$emit("save");
      },
      handleUpdate(row) {
        this.$refs['editBnetCardDrawer'].show(row);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page-header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    overflow: hidden;
    border-bottom: 2px solid #e4e7ed;

    strong {
      height: 38px;
      box-sizing: border-box;
      line-height: 38px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
    }

  }

  .full-container {
    min-height: calc(100vh - 50px);
  }
</style>
